<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-3</title>
    <style>
        .bigdiv {
            height: 130px;
            width: 570px;
            background-color: pink;
            border-radius: 20px;
        }
        
        .red {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
            margin: 15px 10px 10px 50px;
            border-radius: 50%;
        }
        
        .yellow {
            height: 100px;
            width: 100px;
            background-color: yellow;
            float: left;
            margin: 15px 10px;
            border-radius: 50%;
        }
        
        .green {
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
            margin: 15px 10px;
            border-radius: 50%;
        }
        
        .none {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
            margin: 10px 10px;
            font-size: 80px;
        }
    </style>
</head>

<body>
    <div class="bigdiv">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="green"></div>
        <div class="none">00</div>
    </div>
    <script>
        var second = document.querySelector('.none');
        var bigdiv = document.querySelector('.bigdiv');
        var colors = bigdiv.children;
        var none = document.querySelector('.none');


        lighttime(0, 11);
        setTimeout(function() {
            lighttime(1, 11);
        }, 13000);
        /*  setTimeout(lighttime(1, 11), 13000);
        这个是错的 */
        /* 
        1对于多个定时器的效果，由于js执行机制的问题，计时器全部会放在后面执行，
        但效果不希望一起执行，就可以用settimeout来控制执行顺序。 
        2定时器和for循环很像，定时器的函数部分就相当于fori循环里的循环体，
        主要的不同之处在于定时器规定了每次循环的间隔时间
        3外网查方法，官网看看*/
        setTimeout(function() {
            lighttime(2, 11);
        }, 26000);

        function lighttime(colorindex, second) {
            lightcolor(colorindex);
            let i = second;
            var time = window.setInterval(function() {

                let temp = i < 10 ? "0" + i : i;
                none.innerHTML = temp;
                if (i == 0) {
                    clearInterval(time);
                }
                i--;
            }, 1000)
        }

        //亮色函数
        function lightcolor(colorindex) {
            allColorLight();
            for (var i = 0; i < 3; i++) {
                if (i == colorindex) {
                    continue;
                }
                colors[i].style.backgroundColor = 'white';
            }
        }

        function allColorLight() {
            colors[0].style.backgroundColor = 'red';
            colors[1].style.backgroundColor = 'yellow';
            colors[2].style.backgroundColor = 'green';
        }
    </script>
</body>

</html>